    
<html>
    <head>
        <title>COMANDO-J</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script type="text/javascript" src="JSWebsocket.js"></script>
        <script type="text/javascript" src="JSDibujar.js"></script>
        <script type="text/javascript" src="JSEventosTeclado.js"></script>
        <script type="text/javascript" src="JSEventosMouse.js"></script>
        <script type="text/javascript" src="JSTanques.js"></script>
        <script type="text/javascript" src="JSMenu.js"></script>
        <script type="text/javascript" src="JSPiloto.js"></script>
		<script type="text/javascript" src="JSAvion.js"></script>
        <script src="jquery-1.9.1.js"></script>
        <script src="jquery-ui.js"></script>
        <link rel="stylesheet" href="jquery-ui.css">
        <link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
        <script>
  $(function() {
            $( document ).bind('keydown', function( e )
                {
                                
                              eventosAmbos( e.keyCode );
                 });
    
     $( "#menu" ).menu({ position: { my: "center", at: "center" } });
    });
   
  
  
  $(function() {
    $( "#panelDelMenu" ).dialog({
      height: 600,
      width: 800,
      modal: true,
      close: function() {
            cargarEventosLuegoDeCierre();
            
        }
    });
  });


 
  </script>

          <style>
            #fondo {  border-color: green; border-style: solid; position:absolute}
            #piloto {  border-color: green; border-style: solid; position:absolute}
            #territorio {  border-color: green; border-style: solid; position:absolute}
            #arboles {  border-color: green; border-style: solid; position:absolute}
            #tanque1 { border-color: green; border-style: solid; position:absolute; }
            #tanque2 { border-color: green; border-style: solid; position:absolute; }
            #avion { border-color: green; border-style: solid; position:absolute; }
            #drone { border-color: green; border-style: solid; position:absolute; }
            #proyectil { border-color: green; border-style: solid; position:absolute; }
            #sombra { border-color: green; border-style: solid; position:absolute; }
            #canvas { border-color: green; border-style: solid; background-image: url('images/Gramilla1.png')}
            #vistaLateral { border-color: green; border-style: solid; position:absolute;}
            #tanque1VistaLateral { border-color: green; border-style: solid; position:absolute; }
            #tanque2VistaLateral { border-color: green; border-style: solid; position:absolute; }
            #avionVistaLateral { border-color: green; border-style: solid; position:absolute; }
            #bomba { border-color: green; border-style: solid; position:absolute; }
           
            //#panelDelMenu { background-image: url('images/fondoMenu.jpg')}

            .clsProyectil{border: solid 1px #fff; width: 4px;height: 4px;background: #ff0000; position: absolute;}
            //.ui-menu { width: 200px; }
  </style>
    </head>
    <body>
        <div id="canvas" style="height: 700px; width: 1245px;">
		
                        <canvas id="fondo" width="1245" height="700"></canvas>
			<canvas id="territorio" width="1245" height="700"></canvas>
			<canvas id="arboles" width="1245" height="700"></canvas>
			<canvas id="piloto" width="1245" height="700"></canvas>
			<canvas id="tanque1" width="1245" height="700"></canvas>
			<canvas id="tanque2" width="1245" height="700"></canvas>
			<canvas id="avion" width="1245" height="700"></canvas>
			<canvas id="drone" width="1245" height="700"></canvas>
			<canvas id="proyectil" width="1245" height="700"></canvas>
			<canvas id="sombra" width="1245" height="700"></canvas>
			<canvas id="vistaLateral" width="1245" height="700"></canvas>
			<canvas id="tanque1VistaLateral" width="1245" height="700"></canvas>
			<canvas id="tanque2VistaLateral" width="1245" height="700"></canvas>
			<canvas id="avionVistaLateral" width="1245" height="700"></canvas>
			<canvas id="bomba" width="1245" height="700"></canvas>
			<canvas id="temporizador" width="1245" height="200" style="position: absolute; left: 0px; top: 0px;"></canvas>
        
       </div>
        <div id="adios" style="height: 700px; width: 1245px; display: none;">
            <p>Gracias por jugar con Comando J</p>
            <a href="http://localhost:8080/JuegoUDEVerano/">Volver a Jugar. </a>
            
        </div>
        <div id="panelDelMenu" style="" title="">
            
        
            <ul id="menu" style="background: none; width: 70%; text-align: center; margin-left: 14%; margin-top: 14%;">
                <li id="menuItem0"><a href="#" onclick="crearNuevaPartida();">Nueva Partida</a></li>
                <li id="menuItem3" onclick="cargarPartida();"><a href="#">Cargar Partida</a></li>
                <li id="menuItem4" class="ui-state-disabled"><a href="#" onclick="guardarPartida();">Guardar Partida</a></li>
                <li id="menuItem5" class="ui-state-disabled"><a href="#" onclick="unirseAPartida();">Unirse a Partida</a></li>
                <li id="menuItem6" class="ui-state-disabled"><a href="#" onclick="abandonarPartida();">Abandonar Partida</a></li>
                <li id="menuItem7"><a href="ayuda.html">Ayuda</a></li>
            </ul>
            <div id="menuMensaje">
                <div id="nuevaPartidaMensaje" style="display: none; width: 70%; margin-left: 15%; text-align: center; ">
                    <p>Elija bando.</p>
                    <a href="#" onclick="crearNuevaPartidaJ1()"><img src="images/soldadoMenu.png" id="soldadoMenu" style=""/> </a>
                    <a href="#" onclick="crearNuevaPartidaJ2()" style="margin-left: 10%"><img src="images/TanqueLateralMenu.png" id="tanqueLateralMenu" style=""/></a>
                </div>
                <div id="esperandoRival" style="display: none; width: 70%; margin-left: 15%; text-align: center; ">
                    <img src="images/esperaComandoJ.gif"  style=""/>

                </div>
                <div id="guardarPartidaMensaje" style="display: none; width: 70%; margin-left: 15%; text-align: center; ">
                    <p id="numeroPartidaMensaje"></p>
                    <a href="/ComandoJ/comandoJSalir.html">Finalizar</a>
                </div>
                <div id="cargarPartidaMensaje" style="display: none; width: 70%; margin-left: 15%; text-align: center; ">
                    <p id="numeroPartidaMensaje"></p>
                        Partida: <input type="text" name="fname" id="partidaId"/>
                        <a href="#" onclick="cargarPartidaConId();">Cargar</a>
                    <p id="noExistePartidaMensaje"></p>
                    <p id="noIngresoUnNumero"></p>
                </div>
                <div id="elegirRolCargar" style="display: none; width: 70%; margin-left: 15%; text-align: center; ">
                    <p>Elija bando.</p>
                    <a href="#" onclick="asignarRolACargarJ1()"><img src="images/soldadoMenu.png" id="soldadoMenu" style=""/> </a>
                    <a href="#" onclick="asignarRolACargarJ1()" style="margin-left: 25%"><img src="images/TanqueLateralMenu.png" id="tanqueLateralMenu" style=""/></a>
                </div>
            </div>
        
        </div>
        <div id="mensajes">
            
            
        </div>
        <img src="images/Gramilla1.png" id="Gramilla" style="display: none"/>
        <img src="images/Nieve.png" id="Nieve" style="display: none"/>
        <img src="images/Rio.png" id="Rio" style="display: none"/>
        
        <img src="images/Tanque0.png" id="tanque0" style="display: none"/>
        <img src="images/Tanque45.png" id="tanque45" style="display: none"/>
        <img src="images/Tanque90.png" id="tanque90" style="display: none"/>
        <img src="images/Tanque135.png" id="tanque135" style="display: none"/>
        <img src="images/Tanque180.png" id="tanque180" style="display: none"/>
        <img src="images/Tanque225.png" id="tanque225" style="display: none"/>
        <img src="images/Tanque270.png" id="tanque270" style="display: none"/>
        <img src="images/Tanque315.png" id="tanque315" style="display: none"/>
        
        <img src="images/TanqueRoto0.png" id="tanqueRoto0" style="display: none"/>
        <img src="images/TanqueRoto45.png" id="tanqueRoto45" style="display: none"/>
        <img src="images/TanqueRoto90.png" id="tanqueRoto90" style="display: none"/>
        <img src="images/TanqueRoto135.png" id="tanqueRoto135" style="display: none"/>
        <img src="images/TanqueRoto180.png" id="tanqueRoto180" style="display: none"/>
        <img src="images/TanqueRoto225.png" id="tanqueRoto225" style="display: none"/>
        <img src="images/TanqueRoto270.png" id="tanqueRoto270" style="display: none"/>
        <img src="images/TanqueRoto315.png" id="tanqueRoto315" style="display: none"/>
        
        <img src="images/TanqueLateral90.png" id="tanqueLateral90" style="display: none"/>
        <img src="images/TanqueLateral270.png" id="tanqueLateral270" style="display: none"/>
        <img src="images/EscenarioLateral.png" id="Lateral" style="display: none"/>
        
        <img src="images/Soldado0.png" id="Soldado0" style="display: none"/>
        <img src="images/Soldado45.png" id="Soldado45" style="display: none"/>
        <img src="images/Soldado90.png" id="Soldado90" style="display: none"/>
        <img src="images/Soldado135.png" id="Soldado135" style="display: none"/>
        <img src="images/Soldado180.png" id="Soldado180" style="display: none"/>
        <img src="images/Soldado225.png" id="Soldado225" style="display: none"/>
        <img src="images/Soldado270.png" id="Soldado270" style="display: none"/>
        <img src="images/Soldado315.png" id="Soldado315" style="display: none"/>
	<img src="images/SoldadoIzquierdo0.png" id="SoldadoIzq0" style="display: none"/>
        <img src="images/SoldadoIzquierdo45.png" id="SoldadoIzq45" style="display: none"/>
        <img src="images/SoldadoIzquierdo90.png" id="SoldadoIzq90" style="display: none"/>
        <img src="images/SoldadoIzquierdo135.png" id="SoldadoIzq135" style="display: none"/>
        <img src="images/SoldadoIzquierdo180.png" id="SoldadoIzq180" style="display: none"/>
        <img src="images/SoldadoIzquierdo225.png" id="SoldadoIzq225" style="display: none"/>
        <img src="images/SoldadoIzquierdo270.png" id="SoldadoIzq270" style="display: none"/>
        <img src="images/SoldadoIzquierdo315.png" id="SoldadoIzq315" style="display: none"/>
        
        
        <img src="images/Avion0.png" id="Avion0" style="display: none"/>
        <img src="images/Avion90.png" id="Avion90" style="display: none"/>
        <img src="images/Avion180.png" id="Avion180" style="display: none"/>
        <img src="images/Avion270.png" id="Avion270" style="display: none"/>
        
       <img src="images/Bomba90.gif" id="bomba90" style="display: none"/>
        <img src="images/Bomba270.gif" id="bomba270" style="display: none"/>
        <img src="images/Ledronidas0.png" id="drone0" style="display: none"/>
        <img src="images/Ledronidas90.png" id="drone90" style="display: none"/>
        <img src="images/Ledronidas180.png" id="drone180" style="display: none"/>
        <img src="images/Ledronidas270.png" id="drone270" style="display: none"/>
        <img src="images/LedronidasX0.png" id="droneX0" style="display: none"/>
        <img src="images/LedronidasX90.png" id="droneX90" style="display: none"/>
        <img src="images/LedronidasX180.png" id="droneX180" style="display: none"/>
        <img src="images/LedronidasX270.png" id="droneX270" style="display: none"/>
        <img src="images/ataud.png" id="ataud" style="display: none"/>
        
       
        <img src="images/mira.png" id="miraImagen" style="display : none"/>
	<img src="images/tanqueLateral.png" id="tanqueLateralImagen" style="display : none"/>

        <img src="images/arbol1.png" id="arbol" style="display: none"/>
        <img src="images/arbol1.png" id="arbol1" style="display: none"/>
        <img src="images/arbol2.png" id="arbol2" style="display: none"/>
        <img src="images/pino1.png" id="arbol3" style="display: none"/>
        <img src="images/pino2.png" id="arbol4" style="display: none"/>
        <img src="images/crater1.png" id="crater1" style="display: none"/>
        <img src="images/crater2.png" id="crater2" style="display: none"/>
        <img src="images/AvionLateral90.png" id="AvionLateral90" style="display: none"/>
        <img src="images/AvionLateral270.png" id="AvionLateral270" style="display: none"/>
        
        <img src="images/expbomba1.gif" id="expBomba1" style="display: none"/>
        <img src="images/expbomba2.gif" id="expBomba2" style="display: none"/>
        <img src="images/expbomba3.gif" id="expBomba3" style="display: none"/>
        <img src="images/expbomba4.gif" id="expBomba4" style="display: none"/>
        <img src="images/expbomba5.gif" id="expBomba5" style="display: none"/>
        <img src="images/expbomba6.gif" id="expBomba6" style="display: none"/>
        <img src="images/expbomba7.gif" id="expBomba7" style="display: none"/>
        <img src="images/expbomba8.gif" id="expBomba8" style="display: none"/>
        <img src="images/expbomba9.gif" id="expBomba9" style="display: none"/>
        <img src="images/expbomba10.gif" id="expBomba10" style="display: none"/>
        <img src="images/expbomba11.gif" id="expBomba11" style="display: none"/>
        <img src="images/expbomba12.gif" id="expBomba12" style="display: none"/>
        <img src="images/expbomba13.gif" id="expBomba13" style="display: none"/>
        <img src="images/expbomba14.gif" id="expBomba14" style="display: none"/>
        <img src="images/expbomba15.gif" id="expBomba15" style="display: none"/>
        <img src="images/expbomba16.gif" id="expBomba16" style="display: none"/>
        <img src="images/expbomba17.gif" id="expBomba17" style="display: none"/>
        <img src="images/expbomba18.gif" id="expBomba18" style="display: none"/>
        <img src="images/expbomba19.gif" id="expBomba19" style="display: none"/>
        <img src="images/expbomba20.gif" id="expBomba20" style="display: none"/>

        <img src="images/exptanque1.gif" id="expTanque1" style="display: none"/>
        <img src="images/exptanque2.gif" id="expTanque2" style="display: none"/>
        <img src="images/exptanque3.gif" id="expTanque3" style="display: none"/>
        <img src="images/exptanque4.gif" id="expTanque4" style="display: none"/>
        <img src="images/exptanque5.gif" id="expTanque5" style="display: none"/>
        <img src="images/exptanque6.gif" id="expTanque6" style="display: none"/>
        <img src="images/exptanque7.gif" id="expTanque7" style="display: none"/>
        <img src="images/exptanque8.gif" id="expTanque8" style="display: none"/>
        <img src="images/exptanque9.gif" id="expTanque9" style="display: none"/>
        <img src="images/exptanque10.gif" id="expTanque10" style="display: none"/>
        <img src="images/exptanque11.gif" id="expTanque11" style="display: none"/>
        <img src="images/exptanque12.gif" id="expTanque12" style="display: none"/>
        <img src="images/exptanque13.gif" id="expTanque13" style="display: none"/>
        <img src="images/exptanque14.gif" id="expTanque14" style="display: none"/>
        <img src="images/exptanque15.gif" id="expTanque15" style="display: none"/>
        <img src="images/exptanque16.gif" id="expTanque16" style="display: none"/>
        <img src="images/exptanque17.gif" id="expTanque17" style="display: none"/>

		
	<img src="images/respaldoCanvasSombra.png" id="respaldoSombra" style="display: none"/>
    <img src="images/respaldoCanvasTerritorio.png" id="respaldoTerritorio" style="display: none"/>	
    </body>
</html>
